<!--
 * @页面名称:个性设置
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card specificSetting">
    <div style="height: 100%">
      <stable :columns="tableSetting.column" :data="tableSetting.data"></stable>
    </div>
    <modal v-model:visible="modalSetting.visible" :title="modalSetting.title" @ok="ok">
      <el-form :model="FormModel">
        <el-form-item label="是否启用:">
          <el-checkbox v-model="FormModel.isShow"></el-checkbox>
        </el-form-item>
        <el-form-item label="所处位置:">
          <el-input type="number" v-model="FormModel.Site"></el-input>
        </el-form-item>
        <el-form-item label="显示行数:">
          <el-input type="number" v-model="FormModel.Number"></el-input>
        </el-form-item>
      </el-form>
    </modal>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// 表格配置
const tableSetting = reactive({
  column: [
    {
      title: "是否启用",
      field: "MS_IsShow",
      width: 100,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.MS_IsShow} />];
        }
      }
    },
    {
      title: "模块logo",
      field: "MS_Photo",
      width: 80,
      slots: {
        default: ({ row }: any) => {
          return [<img src={row.MS_Photo ? row.MS_Photo : ""} alt="" class="MSIcon" />];
        }
      }
    },
    { title: "模块名称", field: "MS_ModuleName", sortable: true },
    { title: "所处位置", field: "MS_Site", sortable: true },
    { title: "展示行数", field: "MS_Number", sortable: true },
    { title: "记录时间", field: "MS_CreateDate", sortable: true },
    {
      title: "操作",
      width: 60,
      slots: {
        default: ({ row }: any) => {
          return [
            <el-link type="primary" underline={false} onClick={() => edit(row)}>
              修改
            </el-link>
          ];
        }
      }
    }
  ],
  data: [],
  rowClickObj: {} as any
});
// 弹框配置
const modalSetting = reactive({
  visible: false,
  title: "修改"
});
// 表单绑定字段
const FormModel = reactive({
  isShow: false,
  Number: "",
  Site: ""
});
// 图片前缀
const imgStr = ref("data:image/jpeg;base64,");
// 获取数据
const getModules = () => {
  proxy.$vueAxios.get("MasterBaseModuleSet/GetModule").then((res: any) => {
    tableSetting.data = res.List;
    tableSetting.data.forEach((item: any) => {
      item.MS_Photo = imgStr.value + item.MS_Photo;
    });
  });
};
// 修改
const edit = (row: any) => {
  modalSetting.visible = true;
  tableSetting.rowClickObj = row;
  FormModel.isShow = row.MS_IsShow;
  FormModel.Number = row.MS_Number;
  FormModel.Site = row.MS_Site;
};
// 弹出框确认事件
const ok = () => {
  proxy.$vueAxios
    .put("MasterBaseModuleSet", {
      ...tableSetting.rowClickObj,
      MS_Photo: tableSetting.rowClickObj.MS_Photo.split(",")[1],
      MS_IsShow: FormModel.isShow,
      MS_Site: FormModel.Site,
      MS_Number: FormModel.Number
    })
    .then((res: any) => {
      if (res.Mark) {
        getModules();
        modalSetting.visible = false;
      }
    });
};
onMounted(() => {
  getModules();
});
</script>

<style scoped lang="scss">
.specificSetting {
  height: 100%;
  :deep(.MSIcon) {
    width: 20px;
    height: 20px;
  }
}
</style>
